<template>
  <div class="full-box d-flex-c">
    <ConfigGrid
      :configs="configs"
      ref="grid"
      :has-add="false"
      class="finish-grid"
    />
    <BKImagePreviewer ref="imagePreviewer" />
  </div>
</template>

<script>
export default {
  name: 'FinishPanel',
  data () {
    return {
      configs: {
        appId: 'YSJC',
        bzCode: 'YSJC',
        metaSet: 'YSQJC_ZTT_XXBC',
        afterFetchColumns: this.afterFetchColumns,
        noOperation: true,
        module: '记录'
      }
    }
  },
  methods: {
    afterFetchColumns (columns) {
      columns.push({
        title: '操作',
        fixed: 'right',
        width: 180,
        slots: {
          default: ({ row }) => {
            return [
              <div class="d-flex ai-c">
                <el-button size="mini" type="text" vOn:click={() => this.setParams(row)}>预览模式</el-button>
                <el-button size="mini" type="text" vOn:click={() => this.previewImage(row)}>预览</el-button>
                <el-button size="mini" type="text" vOn:click={() => this.removeRow(row)}>删除</el-button>
                <el-button size="mini" type="text" vOn:click={() => this.downloadFile(row)}>下载</el-button>
              </div>
            ]
          }
        }
      })
      return columns
    },
    removeRow (row) {
      this.$confirm('请确认是否删除此条记录？', '提示', { type: 'warning' }).then(async () => {
        await this.$request.singleTableOperation({
          metaSet: this.configs.metaSet,
          methodCode: 'delete',
          methodParams: { ZTTID: row.ZTTID }
        })
        this.$message.success('操作成功')
        this.$refs.grid.refresh()
      })
    },
    setParams (row) {
      const { IDSJSON, ...others } = row
      const { baseLayer, boundaryLayer, stationLayer, projectLayer, exportExtent, legendData, titleData, otherData, stationTextOption, projectTextOption, compassPosition } = JSON.parse(IDSJSON)
      console.log(JSON.parse(IDSJSON))
      this.$store.commit('map-making/setBaseLayer', baseLayer)
      this.$store.commit('map-making/setBoundaryLayer', boundaryLayer)
      this.$store.commit('map-making/setStationLayer', stationLayer)
      this.$store.commit('map-making/setProjectLayer', projectLayer)
      this.$store.commit('map-making/setStationTextOption', stationTextOption)
      this.$store.commit('map-making/setProjectTextOption', projectTextOption)
      this.$store.commit('map-making/setExportExtent', exportExtent)
      this.$store.commit('map-making/setLegendData', legendData)
      this.$store.commit('map-making/setTitleData', titleData)
      this.$store.commit('map-making/setOtherData', otherData)
      this.$store.commit('map-making/setCompassPosition', compassPosition)

      this.$store.commit('map-making/setExportFormData', others)
      this.$emit('showPanel')
    },
    async downloadFile (row) {
      const { fileName, data } = await this.$request.downloadFileByUrl(row.WJLJ)
      this.$request.downloadBlobFile(data, fileName)
    },
    previewImage (row) {
      this.$refs.imagePreviewer.show([row.WJLJ])
    }
  }
}
</script>

<style lang="scss" scoped>
.finish-grid {
  ::v-deep .condition-inner-wrapper {
    .el-form {
      .el-form-item {
        &:first-child {
          .el-form-item__content {
            width: 150px;
          }
        }
      }

      &:last-child {
        .el-form-item__content {
          width: 234px;
        }
      }
    }
  }
}
</style>
